<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API测试工具</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        h2 {
            color: #666;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }
        input, textarea, select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }
        button {
            background: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }
        button:hover {
            background: #0056b3;
        }
        .response {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 15px;
            margin-top: 15px;
            white-space: pre-wrap;
            font-family: monospace;
            font-size: 12px;
        }
        .success {
            border-color: #28a745;
            background: #d4edda;
        }
        .error {
            border-color: #dc3545;
            background: #f8d7da;
        }
        .tab-container {
            display: flex;
            margin-bottom: 20px;
        }
        .tab {
            background: #e9ecef;
            padding: 10px 20px;
            cursor: pointer;
            border: 1px solid #dee2e6;
            border-bottom: none;
            border-radius: 4px 4px 0 0;
        }
        .tab.active {
            background: #007bff;
            color: white;
        }
        .tab-content {
            display: none;
        }
        .tab-content.active {
            display: block;
        }
        .url-builder {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 4px;
            margin-bottom: 15px;
        }
        .test-url {
            font-family: monospace;
            background: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <h1>🧪 微信公众号H5 API测试工具</h1>
    
    <div class="tab-container">
        <div class="tab active" onclick="showTab('register')">注册测试</div>
        <div class="tab" onclick="showTab('dashboard')">Dashboard测试</div>
        <div class="tab" onclick="showTab('api')">API测试</div>
    </div>

    <div id="register-tab" class="tab-content active">
        <div class="container">
            <h2>注册页面测试</h2>
            <div class="url-builder">
                <h3>测试URL生成器</h3>
                <div class="form-group">
                    <label>muserid (微信OpenID):</label>
                    <input type="text" id="test-muserid" value="test_openid_123" placeholder="输入测试用户ID">
                </div>
                <div class="form-group">
                    <label>buserid (买家ID):</label>
                    <input type="text" id="test-buserid" value="buyer_789" placeholder="输入买家ID">
                </div>
                <div class="form-group">
                    <label>flag (跳转标识):</label>
                    <select id="test-flag">
                        <option value="N">N (正常流程)</option>
                        <option value="Y">Y (直接跳转)</option>
                    </select>
                </div>
                <button onclick="generateTestUrl()">生成测试URL</button>
                <div id="generated-url" class="test-url" style="display: none;"></div>
            </div>
            <button onclick="openTestUrl()">打开测试页面</button>
        </div>
    </div>

    <div id="dashboard-tab" class="tab-content">
        <div class="container">
            <h2>Dashboard测试</h2>
            <div class="url-builder">
                <h3>Dashboard测试URL</h3>
                <div class="form-group">
                    <label>用户姓名:</label>
                    <input type="text" id="dash-name" value="测试用户" placeholder="输入用户姓名">
                </div>
                <div class="form-group">
                    <label>公司名称:</label>
                    <input type="text" id="dash-company" value="测试公司" placeholder="输入公司名称">
                </div>
                <div class="form-group">
                    <label>手机号码:</label>
                    <input type="text" id="dash-phone" value="13800138000" placeholder="输入手机号码">
                </div>
                <div class="form-group">
                    <label>微信OpenID:</label>
                    <input type="text" id="dash-openid" value="test_openid_123" placeholder="输入微信OpenID">
                </div>
                <button onclick="generateDashboardUrl()">生成Dashboard URL</button>
                <div id="dashboard-url" class="test-url" style="display: none;"></div>
            </div>
            <button onclick="openDashboardUrl()">打开Dashboard</button>
        </div>
    </div>

    <div id="api-tab" class="tab-content">
        <div class="container">
            <h2>API接口测试</h2>
            
            <div class="form-group">
                <label>选择API:</label>
                <select id="api-select" onchange="updateApiForm()">
                    <option value="check-user">检查用户是否存在</option>
                    <option value="send-sms">发送短信验证码</option>
                    <option value="register">用户注册</option>
                    <option value="user-profile">获取用户资料</option>
                    <option value="dashboard-stats">获取统计数据</option>
                </select>
            </div>

            <div id="api-form-container">
                <!-- API表单将在这里动态生成 -->
            </div>

            <button onclick="testApi()">测试API</button>
            <div id="api-response" class="response" style="display: none;"></div>
        </div>
    </div>

    <script>
        function showTab(tabName) {
            // 隐藏所有标签内容
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.classList.remove('active');
            });
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 显示选中的标签
            document.getElementById(tabName + '-tab').classList.add('active');
            event.target.classList.add('active');
        }

        function generateTestUrl() {
            const muserid = document.getElementById('test-muserid').value;
            const buserid = document.getElementById('test-buserid').value;
            const flag = document.getElementById('test-flag').value;
            
            const url = `http://localhost:3000/?muserid=${encodeURIComponent(muserid)}&buserid=${encodeURIComponent(buserid)}&flag=${flag}`;
            
            document.getElementById('generated-url').textContent = url;
            document.getElementById('generated-url').style.display = 'block';
        }

        function openTestUrl() {
            const url = document.getElementById('generated-url').textContent;
            if (url) {
                window.open(url, '_blank');
            } else {
                alert('请先生成测试URL');
            }
        }

        function generateDashboardUrl() {
            const name = document.getElementById('dash-name').value;
            const company = document.getElementById('dash-company').value;
            const phone = document.getElementById('dash-phone').value;
            const openid = document.getElementById('dash-openid').value;
            
            const params = new URLSearchParams();
            if (name) params.append('name', encodeURIComponent(name));
            if (company) params.append('company', encodeURIComponent(company));
            if (phone) params.append('phone', encodeURIComponent(phone));
            if (openid) params.append('wxopenid', encodeURIComponent(openid));
            params.append('from', 'test');
            
            const url = `http://localhost:3000/dashboard?${params.toString()}`;
            
            document.getElementById('dashboard-url').textContent = url;
            document.getElementById('dashboard-url').style.display = 'block';
        }

        function openDashboardUrl() {
            const url = document.getElementById('dashboard-url').textContent;
            if (url) {
                window.open(url, '_blank');
            } else {
                alert('请先生成Dashboard URL');
            }
        }

        function updateApiForm() {
            const apiType = document.getElementById('api-select').value;
            const container = document.getElementById('api-form-container');
            
            let formHTML = '';
            
            switch(apiType) {
                case 'check-user':
                    formHTML = `
                        <div class="form-group">
                            <label>openid:</label>
                            <input type="text" id="api-openid" value="test_openid_123" placeholder="输入微信OpenID">
                        </div>
                    `;
                    break;
                case 'send-sms':
                    formHTML = `
                        <div class="form-group">
                            <label>手机号:</label>
                            <input type="text" id="api-mobile" value="13800138000" placeholder="输入手机号码">
                        </div>
                    `;
                    break;
                case 'register':
                    formHTML = `
                        <div class="form-group">
                            <label>姓名:</label>
                            <input type="text" id="api-realname" value="测试用户" placeholder="输入姓名">
                        </div>
                        <div class="form-group">
                            <label>公司名称:</label>
                            <input type="text" id="api-companyname" value="测试公司" placeholder="输入公司名称">
                        </div>
                        <div class="form-group">
                            <label>手机号:</label>
                            <input type="text" id="api-mobile" value="13800138000" placeholder="输入手机号码">
                        </div>
                        <div class="form-group">
                            <label>验证码:</label>
                            <input type="text" id="api-captcha" value="123456" placeholder="输入验证码">
                        </div>
                        <div class="form-group">
                            <label>muserid:</label>
                            <input type="text" id="api-muserid" value="test_openid_123" placeholder="输入微信OpenID">
                        </div>
                        <div class="form-group">
                            <label>buserid:</label>
                            <input type="text" id="api-buserid" value="buyer_789" placeholder="输入买家ID">
                        </div>
                    `;
                    break;
                case 'user-profile':
                    formHTML = `
                        <div class="form-group">
                            <label>openid:</label>
                            <input type="text" id="api-openid" value="test_openid_123" placeholder="输入微信OpenID">
                        </div>
                    `;
                    break;
                case 'dashboard-stats':
                    formHTML = `<p>此接口无需参数</p>`;
                    break;
            }
            
            container.innerHTML = formHTML;
        }

        async function testApi() {
            const apiType = document.getElementById('api-select').value;
            const responseDiv = document.getElementById('api-response');
            
            let url = 'http://localhost:3000/api/';
            let options = {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            };
            
            switch(apiType) {
                case 'check-user':
                    url += `check-user?openid=${document.getElementById('api-openid').value}`;
                    break;
                case 'send-sms':
                    url += 'sms/send';
                    options.method = 'POST';
                    options.body = JSON.stringify({
                        mobile: document.getElementById('api-mobile').value
                    });
                    break;
                case 'register':
                    url += 'register';
                    options.method = 'POST';
                    options.body = JSON.stringify({
                        realname: document.getElementById('api-realname').value,
                        companyname: document.getElementById('api-companyname').value,
                        mobile: document.getElementById('api-mobile').value,
                        captcha: document.getElementById('api-captcha').value,
                        muserid: document.getElementById('api-muserid').value,
                        buserid: document.getElementById('api-buserid').value
                    });
                    break;
                case 'user-profile':
                    url += `user/profile?openid=${document.getElementById('api-openid').value}`;
                    break;
                case 'dashboard-stats':
                    url += 'dashboard/stats';
                    break;
            }
            
            responseDiv.style.display = 'block';
            responseDiv.textContent = '发送请求...';
            
            try {
                const response = await fetch(url, options);
                const data = await response.json();
                
                responseDiv.textContent = JSON.stringify(data, null, 2);
                responseDiv.className = 'response success';
            } catch (error) {
                responseDiv.textContent = '请求失败: ' + error.message;
                responseDiv.className = 'response error';
            }
        }

        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            updateApiForm();
            generateTestUrl();
            generateDashboardUrl();
        });
    </script>
</body>
</html>